<template>
	<view>
		<view class="input-wrap">
			<input class="input" placeholder="请输入手机号码" v-model="phone" placeholder-class="input-phl" confirm-type="search" @confirm="search" @focus="focus">
		</view>

		<view class="friends-item" v-if="searchResult">
			<image class="friends-avatar" :src="getImgUrl(searchResult.avatar)"></image>
			<text class="friends-name">{{searchResult.nickName}}</text>
			<view class="apply-btn" @tap="confirm">确定</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				searchResult: null,
			}
		},
		methods: {
			focus() {
				this.searchResult = null
			},
			search() {
				// if (/^1\d{10}$/.test(this.phone)) {
					this.$api.getUserInfoByPhone(this.phone).then(res => {
						this.searchResult = res
					}).catch(() => {
						this.$store.commit('setTempIdentityDesc','')
						uni.navigateTo({
							url: `/pages/userDetail/inputCommentTarget?type=1&phone=${this.phone}`
						})
					})
				// } else {
				// 	uni.showToast({
				// 		title: '请输入正确的手机号',
				// 		icon: 'none'
				// 	})
				// }
			},
			confirm() {
				this.$store.commit('updateNewEvaluate', {
					toUserInfo: this.searchResult
				})
				// uni.navigateBack({
				// 	delta: 2
				// })
				uni.navigateTo({
					url: '/pages/userDetail/addComment?delta=3'
				})
			}
		}
	}
</script>

<style lang="less">
	.input-wrap {
		width: 690rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin: 20rpx auto;
		border-bottom: 2rpx solid #EEEEEE;

		.input {
			font-size: 32rpx;
			font-weight: 400;
			color: #666;
			line-height: 44rpx;
		}

		.input-phl {
			color: #BCC2CE;
		}
	}

	.friends-item {
		width: 650rpx;
		margin: 10rpx auto;
		height: 128rpx;
		display: flex;
		align-items: center;
		position: relative;

		.friends-avatar {
			width: 98rpx;
			height: 98rpx;
			border-radius: 50%;
		}

		.friends-name {
			margin-left: 20rpx;
			font-size: 36rpx;
			color: #333;
			line-height: 50rpx;
		}

		.apply-btn {
			position: absolute;
			right: 20rpx;
			top: 35rpx;
			height: 58rpx;
			width: 150rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #3399FF;
			border-radius: 6rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 58rpx;

		}
	}
</style>
